<template>
  <div class="on_line">

    <div class="set">直播设置</div>
    <div class="center">
      <span>直播情况</span>
      <!-- <div type="text" @click="click()" class="newly">新增直播</div> -->
      <div
        type="text"
        @click="dialogVisible = true"
        class="newly"
        style="cursor: pointer;"
      >新增直播</div>
    </div>
    <!-- 弹出框 -->
    <el-dialog :visible.sync="dialogVisible" width="50%">
      <!-- <div class="content" v-show="flag"> -->
      <div class="content">
        <div class="content-list">
          <div class="content-left">

            <div class="time">
              <p>直播时间</p>
              <el-date-picker
                      v-model="value"
                      type="datetime"
                      placeholder="选择日期时间">
              </el-date-picker>

            </div>
            <div class="theme">
              <p>直播主题</p>
              <el-input v-model="input" placeholder="请输入内容" style="width: 3rem;height: 0.4rem"></el-input>
            </div>
            <div class="theme">
              <p style="margin-right: 0.8rem">时长</p>
              <el-input v-model="deta" placeholder="请输入内容" style="width: 3rem;height: 0.4rem"></el-input>
            </div>
            <div class="mation">
              <div class="summary">
                <p>直播概述</p>
                <el-input
                  type="textarea"
                  :rows="4"
                  placeholder="请输入内容"
                  v-model="textarea"
                  style="width: 3rem"
                ></el-input>
              </div>
            </div>
          </div>

        </div>
        <div class="root">
          <!-- <div class="root-but" @click="del()">发布</div> -->
          <div class="root-but"  @click="add()" >发布</div>
        </div>
      </div>
    </el-dialog>
    <div class="itemMaxBox">
      <div class="topBoxTitle">
        <div>申请序号</div>
        <!-- <div>展商</div> -->
        <div>直播日期</div>
        <div>直播时间</div>
        <div>时长</div>
        <div class="liveTitle">直播主题</div>
        <div>直播概述</div>
        <div>状态</div>
        <div>操作</div>
      </div>
      <div class="item">
        <div class="boxItem" v-for="(item,index) in tableData" :key="index">
          <div>{{index+1}}</div>
          <!-- <div>{{item.exhibitor}}</div> -->
          <div>{{item.liveDate|Date}}</div>
          <div>{{item.liveDate|formatDate}}</div>
          <div>{{item.hour}}</div>
          <div class="liveText">{{item.streamName}}</div>
          <div>{{item.overview}}</div>
          <div>发布成功</div>
          <div style="color:#E29000;font-weight:bold;">撤销发布</div>
        </div>
      </div>
      <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              layout="prev, pager, next"
              :total="30"
      ></el-pagination>
    </div>
    </div>
</template>

<script>
  import {onlineLive, addLive, content} from "../../request/home";
    import axios from "axios"
    export default {
        name: "online",
        components: {gantt},
        data() {
            return {
                background: {background: "#FAFAFA"},
                value: "",
                total:1,
                flag: false,
                input: "",
                textarea: "",
                centerDialogVisible: false,
                tasks: {
                    data: [
                        {
                            id: 1,
                            text: "Task #1",
                            start_date: "2020-01-17-00-00-00",
                            duration: 3,
                            progress: 0.6,
                        },
                        {
                            id: 2,
                            text: "Task #2",
                            start_date: "2020-01-17-01-00-00",
                            duration: 3,
                            progress: 0.4,
                        },
                        {
                            id: 3,
                            text: "Task #3",
                            start_date: "2020-01-17-02-00-00",
                            duration: 3,
                            progress: 0.4,
                        },
                        {
                            id: 4,
                            text: "Task #4",
                            start_date: "2020-01-17-03-00-00",
                            duration: 3,
                            progress: 0.4,
                        },
                    ],
                    links: [{id: 1, source: 1, target: 2, type: "0"}],
                },
                tableData: [
                    // {
                    //     exhibitor: "北京精雕",
                    //     date: "4.13",
                    //     time: "10:00 am",
                    //     duration: "2小时",
                    //     live: "3D打印技术...",
                    //     summarize: "机床领域... ",
                    //     state: "发布成功",
                    // },
                ],
                activeName: "second",
                dialogVisible: false,
                deta:"",
              Addlive:{
                id:1,
                hour:this.deta,
                streamName:this.input,
                overview:this.textarea,
                stringDate:this.value
              },
              pagesize: 10,
            };
        },
        mounted() {
        console.log(typeof this.value)
        this.save()
          onlineLive({ pageNum:1, pageSize: 10 }).then((res) => {
            this.tableData = res.data.data.list;
            
            this.total=res.data.data.total
          });
        },
      created() {
      console.log(this.value)
      },
  filters: {
    formatDate: function (value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? ('0' + MM) : MM;
      let d = date.getDate();
      d = d < 10 ? ('0' + d) : d;
      let h = date.getHours();
      h = h < 10 ? ('0' + h) : h;
      let m = date.getMinutes();
      m = m < 10 ? ('0' + m) : m;
      let s = date.getSeconds();
      s = s < 10 ? ('0' + s) : s;
      return  h + ':' + m ;
    },
    Date: function (value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? ('0' + MM) : MM;
      let d = date.getDate();
      d = d < 10 ? ('0' + d) : d;
      let h = date.getHours();
      h = h < 10 ? ('0' + h) : h;
      let m = date.getMinutes();
      m = m < 10 ? ('0' + m) : m;
      let s = date.getSeconds();
      s = s < 10 ? ('0' + s) : s;
      return  y + '-' + MM + '-' +d;
    },
  },
      methods: {
        handleCurrentChange(val) {
          console.log(val)
          onlineLive({ pageNum: val, pageSize: this.pagesize }).then((res) => {

            this.total=res.data.data.total
            console.log(this.total)
            this.tableData = res.data.data.list;
          });
        },
        handleSizeChange(val) {
          this.pagesize = val;
        },
            addMessage(message) {
                this.messages.unshift(message);
                if (this.messages.length > 40) {
                    this.messages.pop();
                }
            },
            click() {
                this.flag = true;
            },
            del() {
                this.flag = false;
            },
            logTaskUpdate(id, mode, task) {
                let text = task && task.text ? ` (${task.text})` : "";
                let message = `Task ${mode}: ${id} ${text}`;
                this.addMessage(message);
            },

            logLinkUpdate(id, mode, link) {
                let message = `Link ${mode}: ${id}`;
                if (link) {
                    message += ` ( source: ${link.source}, target: ${link.target} )`;
                }
                this.addMessage(message);
            },
            handleClick(tab, event) {
                console.log(tab, event);
            },
            save(){
              onlineLive({ pageNum: 1, pageSize: 10 }).then(res=>{
                console.log(res)
               this.tableData=res.data.data.list
              
              })
            },
            add(){
              this.dialogVisible=false
             var live={
               id:1,
               hour:this.deta,
               streamName:this.input,
               overview:this.textarea,
               stringDate:this.value
             }
              addLive(
                        live
              ).then(res=>{
                console.log(res)
            onlineLive({ pageNum: 1, pageSize: 10 }).then(res=>{
                console.log(res)
               this.tableData=res.data.data.list
              
              })
              })
            }
        },

    };
</script>

<style lang="less" scoped>
* {
  font-size: 0.12rem;
}
.on_line {
  width: 15.8rem;
  // height: 6.7rem;
  padding-bottom: 1rem;
  background: rgba(255, 255, 255, 1);
  border-radius: 0.08rem;
  margin: 0 auto;
  margin-left: 0.3rem;
  padding-top: 0.23rem;
  position: relative;
  .set {
    margin-left: 0.57rem;
    width: 1.2rem;
    height: 0.4rem;
    background: rgba(226, 144, 0, 1);
    border-radius: 0.05rem;
    font-size: 0.16rem;
    text-align: center;
    color: #ffffff;
    cursor: pointer;
    line-height: 0.4rem;
  }
  .center {
    margin-left: 0.52rem;
    width: 11rem;
    // background: yellow;
    display: flex;
    align-items: center;
    margin-top: 0.32rem;
    justify-content: space-between;
    span {
      font-size: 0.18rem;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #004cb3;
      // margin: 0rem 7.29rem 0 0.51rem;
    }
    .newly {
      width: 1rem;
      height: 0.4rem;
      background: rgba(0, 76, 179, 1);
      border-radius: 0.05rem;
      font-size: 0.16rem;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      text-align: center;
      line-height: 0.4rem;
    }
  }
  .content{
       width: 15.8rem;
      height: 6.7rem;
    .content-list{

      .content-left{

                          .time {
                              margin-left: 0.57rem;
                              margin-top: 0.29rem;
                              display: flex;

                              p {
                                  font-size: 0.16rem;
                                  line-height: 0.4rem;
                                  margin-right: 0.48rem;
                              }

                              .el-icon-time:before {
                                  content: none;
                              }
                          }

                          .theme {
                              margin-left: 0.57rem;
                              margin-top: 0.59rem;
                              display: flex;

                              p {
                                  font-size: 0.16rem;
                                  line-height: 0.4rem;
                                  margin-right: 0.48rem;
                              }
                          }

                          .mation {
                            width: 100%;
                            height: 3rem;
                            display: flex;

                            .summary {
                              margin-left: 0.57rem;
                              margin-top: 0.59rem;
                              display: flex;

                              p {
                                width: 0.65rem;
                                font-size: 0.16rem;
                                line-height: 0.4rem;
                                margin-right: 0.48rem;
                              }
                            }
                          }

      }
    }
  }
  .root{
              width: 9rem;
              height: 0.5rem;
              display: flex;
              justify-content: center;
    .root-but {
                    width: 1.6rem;
                    height: 0.5rem;
                    background: rgba(0, 76, 179, 1);
                    border-radius: 0.05rem;
                    font-size: 0.18rem;
                    font-weight: bold;
                    text-align: center;
                    line-height: 0.5rem;
                    color: #ffffff;
                    cursor: pointer;
                }
  }
  /*.content {*/
  /*  // width: 15.8rem;*/
  /*  // height: 6.7rem;*/
  /*  // position: absolute;*/
  /*  // left: 50%;*/
  /*  // top: 50%;*/
  /*  // margin-left: -7.9rem;*/
  /*  // z-index: 1000000;*/
  /*  background-color: #fff;*/
  /*  // margin-top: -3.6rem;*/
  /*  .content-list {*/
  /*    display: flex;*/
  /*    .content-left {*/
  /*      .set {*/
  /*          margin-left: 0.57rem;*/
  /*          width: 1.2rem;*/
  /*          height: 0.4rem;*/
  /*          background: rgba(226, 144, 0, 1);*/
  /*          border-radius: 0.05rem;*/
  /*          font-size: 0.16rem;*/
  /*          text-align: center;*/
  /*          color: #ffffff;*/
  /*          cursor: pointer;*/
  /*          line-height: 0.4rem;*/
  /*      }*/

  /*      .center {*/
  /*          width: 100%;*/
  /*          // background: yellow;*/
  /*          display: flex;*/
  /*          align-items: center;*/
  /*          margin-top: 0.32rem;*/

  /*          span {*/
  /*              font-size: 0.18rem;*/
  /*              font-family: Microsoft YaHei;*/
  /*              font-weight: 400;*/
  /*              color: #004cb3;*/
  /*              margin: 0rem 7.29rem 0 0.51rem;*/
  /*          }*/

  /*          .newly {*/
  /*              width: 1rem;*/
  /*              height: 0.4rem;*/
  /*              background: rgba(0, 76, 179, 1);*/
  /*              border-radius: 0.05rem;*/
  /*              font-size: 0.16rem;*/
  /*              font-family: Microsoft YaHei;*/
  /*              font-weight: 400;*/
  /*              color: rgba(255, 255, 255, 1);*/
  /*              text-align: center;*/
  /*              line-height: 0.4rem;*/
  /*          }*/
  /*      }*/

  /*      .content {*/
  /*          width: 15.8rem;*/
  /*          height: 6.7rem;*/
  /*          position: absolute;*/
  /*          left: 50%;*/
  /*          top: 50%;*/
  /*          margin-left: -7.9rem;*/
  /*          z-index: 1000000;*/
  /*          background-color: #fff;*/
  /*          margin-top: -3.6rem;*/

  /*          .content-list {*/

  /*              display: flex;*/

  /*              .content-left {*/
  /*                  .set {*/
  /*                      // padding-top: 0.25rem;*/
  /*                      margin-left: 0.57rem;*/

  /*                      div {*/
  /*                          width: 1.2rem;*/
  /*                          height: 0.4rem;*/
  /*                          background: rgba(226, 144, 0, 1);*/
  /*                          border-radius: 0.05rem;*/
  /*                          font-size: 0.16rem;*/
  /*                          text-align: center;*/
  /*                          line-height: 0.4rem;*/
  /*                          color: #ffffff;*/
  /*                          cursor: pointer;*/
  /*                          // margin-top: 0.36rem;*/
  /*                      }*/
  /*                  }*/

  /*                  .time {*/
  /*                      margin-left: 0.57rem;*/
  /*                      margin-top: 0.29rem;*/
  /*                      display: flex;*/

  /*                      p {*/
  /*                          font-size: 0.16rem;*/
  /*                          line-height: 0.4rem;*/
  /*                          margin-right: 0.48rem;*/
  /*                      }*/

  /*                      .el-icon-time:before {*/
  /*                          content: none;*/
  /*                      }*/
  /*                  }*/

  /*                  .theme {*/
  /*                      margin-left: 0.57rem;*/
  /*                      margin-top: 0.59rem;*/
  /*                      display: flex;*/

  /*                      p {*/
  /*                          font-size: 0.16rem;*/
  /*                          line-height: 0.4rem;*/
  /*                          margin-right: 0.48rem;*/
  /*                      }*/
  /*                  }*/

  /*                  .mation {*/
  /*                      width: 100%;*/
  /*                      height: 3rem;*/
  /*                      display: flex;*/

  /*                      .summary {*/
  /*                          margin-left: 0.57rem;*/
  /*                          margin-top: 0.59rem;*/
  /*                          display: flex;*/

  /*                          p {*/
  /*                              width: 0.65rem;*/
  /*                              font-size: 0.16rem;*/
  /*                              line-height: 0.4rem;*/
  /*                              margin-right: 0.48rem;*/
  /*                          }*/
  /*                      }*/
  /*                  }*/
  /*              }*/

  /*              .content-right {*/
  /*                  margin-left: 2rem;*/
  /*                  position: relative;*/

  /*              }*/
  /*          }*/
  /*      }*/

  /*      .root {*/
  /*          width: 5rem;*/
  /*          height: 0.5rem;*/
  /*          margin: 0 auto;*/
  /*          display: flex;*/
  /*          justify-content: space-between;*/
  /*          margin-top: 0.48rem;*/

  /*          .root-but {*/
  /*              width: 1.6rem;*/
  /*              height: 0.5rem;*/
  /*              background: rgba(0, 76, 179, 1);*/
  /*              border-radius: 0.05rem;*/
  /*              font-size: 0.18rem;*/
  /*              font-weight: bold;*/
  /*              text-align: center;*/
  /*              line-height: 0.5rem;*/
  /*              color: #ffffff;*/
  /*              cursor: pointer;*/
  /*          }*/

  /*          .root-bit {*/
  /*              width: 1.6rem;*/
  /*              height: 0.5rem;*/
  /*              background: rgba(226, 144, 0, 1);*/
  /*              border-radius: 0.05rem;*/
  /*              font-size: 0.18rem;*/
  /*              font-weight: bold;*/
  /*              text-align: center;*/
  /*              line-height: 0.5rem;*/
  /*              color: #ffffff;*/
  /*              cursor: pointer;*/
  /*          }*/
  /*      }*/
  /*    }*/
  /*    .content-right {*/
  /*      margin-left: 2rem;*/
  /*      position: relative;*/
  /*    }*/
  /*  }*/
  /*  .root {*/
  /*    // width: 5rem;*/
  /*    height: 0.5rem;*/
  /*    // margin: 0 auto;*/
  /*    display: flex;*/
  /*    justify-content: space-between;*/
  /*    margin-top: 0.48rem;*/
  /*    .root-but {*/
  /*      margin: 0 auto;*/
  /*      width: 1.6rem;*/
  /*      height: 0.5rem;*/
  /*      background: rgba(0, 76, 179, 1);*/
  /*      border-radius: 0.05rem;*/
  /*      font-size: 0.18rem;*/
  /*      font-weight: bold;*/
  /*      text-align: center;*/
  /*      line-height: 0.5rem;*/
  /*      color: #ffffff;*/
  /*      cursor: pointer;*/
  /*    }*/
  /*    .root-bit {*/
  /*      width: 1.6rem;*/
  /*      height: 0.5rem;*/
  /*      background: rgba(226, 144, 0, 1);*/
  /*      border-radius: 0.05rem;*/
  /*      font-size: 0.18rem;*/
  /*      font-weight: bold;*/
  /*      text-align: center;*/
  /*      line-height: 0.5rem;*/
  /*      color: #ffffff;*/
  /*      cursor: pointer;*/
  /*    }*/
  /*  }*/
  /*}*/
  .itemMaxBox {
    .topBoxTitle {
      width: 11rem;
      display: flex;
      height: 0.4rem;
      border: 1px solid #cccccc;
      margin-left: 0.52rem;
      margin-top: 0.1rem;
      div {
        flex: 1;
        text-align: center;
        line-height: 0.4rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 0.16rem;
      }
      .liveTitle {
        flex: 2.5;
      }
    }
    .item {
      overflow-x: hidden;
      overflow-y: scroll;
      height: 5.2rem;
      .boxItem {
        width: 11rem;
        display: flex;
        line-height: 0.5rem;
        margin-left: 0.52rem;
        border-bottom: 1px solid #eeeeee;
        div {
          flex: 1;
          text-align: center;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;

          font-size: 0.14rem;
        }
        .liveText {
          flex: 2.5;
        }
      }
      .boxItem:nth-last-child(1) {
        border: none;
      }
    }
    .item::-webkit-scrollbar {
      /*隐藏滚轮*/
      display: none;
    }
  }
}
.revocation {
  font-size: 0.14rem;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: rgba(226, 144, 0, 1);
}
/deep/ .el-table__body-wrapper {
  .el-table td,
  .el-table th {
    padding: 0 !important;
    text-align: left;
  }
}
/deep/ .el-table td,
.el-table th {
  padding: 0 !important;
  z-index: 999999;
}
/deep/ .el-table .cell {
  line-height: 0.4rem;
  padding-right: 0.1rem;
}
</style>
